<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="geometry" content="line">
  <link rel="stylesheet" href="./assets/common.css">
  <title>canvasTooltip</title>
  <style>
  </style>
</head>

<body>
<div id="canvas"></div>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="./assets/data-set.min.js"></script>
<script src="../build/g2.js"></script>
<script>
const data = [{
  country: 'Asia',
  year: '1750',
  value: 502
}, {
  country: 'Asia',
  year: '1800',
  value: 635
}, {
  country: 'Asia',
  year: '1850',
  value: 809
}, {
  country: 'Asia',
  year: '1900',
  value: 5268
}, {
  country: 'Asia',
  year: '1950',
  value: 4400
}, {
  country: 'Asia',
  year: '1999',
  value: 3634
}, {
  country: 'Asia',
  year: '2050',
  value: 947
}, {
  country: 'Africa',
  year: '1750',
  value: 106
}, {
  country: 'Africa',
  year: '1800',
  value: 107
}, {
  country: 'Africa',
  year: '1850',
  value: 111
}, {
  country: 'Africa',
  year: '1900',
  value: 1766
}, {
  country: 'Africa',
  year: '1950',
  value: 221
}, {
  country: 'Africa',
  year: '1999',
  value: 767
}, {
  country: 'Africa',
  year: '2050',
  value: 133
}, {
  country: 'Europe',
  year: '1750',
  value: 163
}, {
  country: 'Europe',
  year: '1800',
  value: 203
}, {
  country: 'Europe',
  year: '1850',
  value: 276
}, {
  country: 'Europe',
  year: '1900',
  value: 628
}, {
  country: 'Europe',
  year: '1950',
  value: 547
}, {
  country: 'Europe',
  year: '1999',
  value: 729
}, {
  country: 'Europe',
  year: '2050',
  value: 408
}, {
  country: 'Oceania',
  year: '1750',
  value: 200
}, {
  country: 'Oceania',
  year: '1800',
  value: 200
}, {
  country: 'Oceania',
  year: '1850',
  value: 200
}, {
  country: 'Oceania',
  year: '1900',
  value: 460
}, {
  country: 'Oceania',
  year: '1950',
  value: 230
}, {
  country: 'Oceania',
  year: '1999',
  value: 300
}, {
  country: 'Oceania',
  year: '2050',
  value: 300
}];
const chart = new G2.Chart({
  container: 'canvas',
  forceFit: true,
  height: window.innerHeight
});
chart.source(data, {
  year: {
    type: 'linear',
    tickInterval: 50
  }
});
chart.tooltip({
  crosshairs: {
    type: 'line'
  },
  useHtml: false
});
chart.areaStack()
  .position('year*value')
  .color('country');
chart.lineStack()
  .position('year*value')
  .color('country')
  .size(2);
chart.render();
</script>
</body>

</html>
